<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/layui/css/layui.css">

</head>

<body>

<div class="layui-container">

    <div class="layui-row">

        <div class="layui-col-md4 layui-col-md-offset4" style="margin-top: 100px; box-shadow: 2px 2px 5px #ccc">

            <div style="height: 80px;

                           text-align: center;

                           font-size:30px;

                    ">后台登录
            </div>

            <form class="layui-form layui-form-pane" action="">

                <div class="layui-form-item" pane>

                    <label class="layui-form-label">用户名</label>

                    <div class="layui-input-block">

                        <input type="text" name="name" required lay-verify="required" placeholder="请输入标题"
                               autocomplete="off" class="layui-input">

                    </div>

                </div>

                <div class="layui-form-item">

                    <label class="layui-form-label">密码</label>

                    <div class="layui-input-block">

                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                               autocomplete="off" class="layui-input">

                    </div>

                </div>

                <div class="layui-form-item" pane>

                    <label class="layui-form-label">验证码</label>

                    <div class="layui-input-inline">

                        <input type="text" name="yzm" style="width:60%" required lay-verify="required"
                               placeholder="请输入验证码" autocomplete="off" class="layui-input">

                        <div style="display: inline" class="layui-form-mid layui-word-aux"><img id='captcha'
                                                                                                style="display: inline"
                                                                                                src="{:captcha_src()}"
                                                                                                alt="captcha"/></div>

                    </div>

                </div>

                <div class="layui-form-item">

                    <div class="layui-input-block">

                        <input type="button" class="layui-btn" lay-submit lay-filter="formDemo" value="立即提交"></input>

                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>

                    </div>

                </div>

            </form>

        </div>

    </div>
</div>
<script src="/static/layui/layui.all.js"></script>

<script>

    //只需要引入layui.all.js就ok

    //这里我们需要用到form表单，jquery的ajax提交，layui的弹弹窗

    //所以需要引用，下面数组就是引入的组件。

    layui.use(['form', 'jquery', 'layer'], function () {

        var form = layui.form;

        var $ = layui.jquery;

        //上两行就是引用form 和$ ，下面需要用到

        //监听表单提交，获取表单信息：submit(formDemo)数据对应这个lay-filter="formDemo"

        form.on('submit(formDemo)', function (data) {

            //从表单中获取相应数据

            var name = data.field.name;

            var password = data.field.password;

            var yzm = data.field.yzm;

            $.ajax({
                url: "index",//请求地址，当前在admin/user/userLogin下，提交给当前方法即可
                //发送给服务器的数据
                data: {
                    'name': name,
                    'password': password,
                    'yzm': yzm
                },
                type: "post",//提交方式
                dataType: "json",
                success: function (data) {
                    //成功回调
                    if (data.status === 0) {
                        //登录失败，status后台自定义状态码
                        layer.msg(data.msg);
                        //layer自带的弹窗，msg后台自定义消息，
                        //emm就是最开始layui.use中引用的layer，不然这里没法使用。
                    } else {
                        //登录成功 msg后台自定义消息
                        layer.msg(data.msg);
                        console.log(data);
                        //行吧，这里是自定义跳转，登录成功过后直接跳到主页
                        //window.location.href = "{:url('admin/index/index')}"
                    }
                    return false;
                },

                error: function (data) {

                    console.log('==错误信息==', data);

                    return false;

                }

            });

            return false;

        });

        //提交数据结束

        // 验证码刷新，，通过jquery获取图片dom，并实现点击功能。

        $("#captcha").click(function (event) {

            // jqery中获取id是上面这样的，如果是获取class就是 $(".captcha")

            // 当然我这里不涉及类名。

            console.log('我被点击了');
            // 控制台输出这鬼东西被点击了没有

            console.log(event);

            //给当前图片的src换一个新的url，后面带上一个随机数。

            //虽然我还不知道原理，

            //但是这样就能让验证码刷新，

            //请求tp6这个captcha_src()方法，如果不加后面那串估计后台认为

            //什么也不给你请求个锤子，原来那个给你

            this.src = "{:captcha_src()}?" + Math.random();

            console.log(this.src);//我打印了一下值得变化，事实上只有后面随机数变了

        })

    });
</script>

</body>

</html>